import {
  Button,
  Card,
  Col,
  Modal,
  Pagination,
  Row,
  Space,
  Switch,
  Table
} from 'antd'
import React, { useState } from 'react'
import { useCommodityClassify, useCommodityClassifySearchId } from '@/api/query'

import { FileTextOutlined } from '@ant-design/icons'
import { FormattedMessage } from 'react-intl'
import { useAppSelector } from '@/store/hooks'

interface DataType {
  _id: string
  key: number
  id: number
  name: string
  parentId: number
  level: number
  productCount: number
  productUnit: string
  navStatus: number
  showStatus: number
  sort: number
  icon: string
  keywords: string
  description: string
}

const Index = () => {
  const [pageNum, setPageNum] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [currentId, setCurrentId] = useState(0)

  const { definedLocale } = useAppSelector((state) => state.front)

  const list1: DataType[] = []
  const list2: DataType[] = []

  const { isLoading, error, data } = useCommodityClassify(pageNum, pageSize)
  const {
    isLoading: isLoadingId,
    error: errorId,
    data: dataId
  } = useCommodityClassifySearchId(currentId)

  if (isLoading || isLoadingId) {
    return <div>loading</div>
  }

  if (error || errorId) {
    return <div>error</div>
  }

  if (data && data.list) {
    data.list.forEach((ele: DataType) => {
      list1.push({ ...ele, key: ele.id })
    })
  }

  if (dataId && dataId.list) {
    dataId.list.forEach((ele: DataType) => {
      list2.push({ ...ele, key: ele.id })
    })
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange
  }

  const changPage = (page: number, pageSize: number) => {
    setPageNum(page) // 改变当前页
    setPageSize(pageSize) // 改变每页个数
  }

  const onChange1 = (record: DataType) => {
    console.log('状态record====', record)
    // 实际业务逻辑
  }

  const onChange2 = (record: DataType) => {
    console.log('导航栏record====', record)
    // 实际业务逻辑
  }

  const next = (record: DataType) => {
    setCurrentId(record.id)
    setIsModalOpen(true)
  }

  const edit = (record: DataType) => {
    console.log(record)
    // 编辑逻辑
  }

  const dele = (record: DataType) => {
    console.log(record)
    // 删除逻辑
  }

  const handleOk = () => {
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const columns: any[] = [
    {
      title: <FormattedMessage id="commodity_brand.id" />,
      dataIndex: 'id'
    },
    {
      title: <FormattedMessage id="commodity_classification.name" />,
      dataIndex: 'name',
      render: (text: string) => <a>{text}</a>
    },
    {
      title: <FormattedMessage id="commodity_classification.level" />,
      dataIndex: 'level'
    },
    {
      title: <FormattedMessage id="commodity_classification.product.count" />,
      dataIndex: 'productCount'
    },
    {
      title: <FormattedMessage id="commodity_classification.product.unit" />,
      dataIndex: 'productUnit'
    },
    {
      title: <FormattedMessage id="commodity_classification.nav.status" />,
      dataIndex: 'navStatus',
      render: (_, record: DataType) => (
        <Space>
          <Switch defaultChecked onChange={() => onChange2(record)} />
        </Space>
      )
    },
    {
      title: <FormattedMessage id="commodity_classification.show.status" />,
      dataIndex: 'showStatus',
      render: (_, record: DataType) => (
        <Space>
          <Switch defaultChecked onChange={() => onChange1(record)} />
        </Space>
      )
    },
    {
      title: <FormattedMessage id="commodity_classification.sort" />,
      dataIndex: 'sort'
    },
    {
      title: <FormattedMessage id="commodity_type.setting" />,
      dataIndex: 'setting',
      render: (_, record: DataType) => (
        <Space>
          <Button onClick={() => next(record)}>
            <FormattedMessage id="commodity_classification.view.subordinates" />
          </Button>
        </Space>
      )
    },
    {
      title: <FormattedMessage id="commodity_brand.operate" />,
      dataIndex: 'operation',
      render: (_, record: DataType) => (
        <Space>
          <Button type="primary" onClick={() => edit(record)}>
            <FormattedMessage id="commodity_brand.edit" />
          </Button>
          <Button danger type="primary" onClick={() => dele(record)}>
            <FormattedMessage id="commodity_brand.delete" />
          </Button>
        </Space>
      )
    }
  ]

  const columnsId = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '名称',
      dataIndex: 'name'
    },
    {
      title: '数量',
      dataIndex: 'productCount'
    },
    {
      title: '单位',
      dataIndex: 'productUnit'
    },
    {
      title: '排序',
      dataIndex: 'sort'
    }
  ]

  return (
    <div>
      <Card>
        <Row>
          <Col span={6}>
            <FileTextOutlined />
            <FormattedMessage id="commodity_title.data.list" />
          </Col>
          <Col span={6}></Col>
          <Col span={6}></Col>
          <Col span={6} style={{ textAlign: 'right' }}>
            <Button type="default">
              <FormattedMessage id="commodity_title.add" />
            </Button>
          </Col>
        </Row>
      </Card>
      {/* 数据 */}
      <Card style={{ marginTop: 20 }}>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={list1}
          pagination={{
            hideOnSinglePage: true
          }}
        />
        <Modal
          title="分类详情"
          visible={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Table
            columns={columnsId}
            dataSource={list2}
            pagination={{
              hideOnSinglePage: true
            }}
          />
        </Modal>
        <Pagination
          total={data.total}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => {
            if (definedLocale === 'zh') {
              return `总共 ${total} 条`
            } else {
              return `Total ${total} items`
            }
          }}
          onChange={changPage}
          pageSizeOptions={['5', '10', '15', '20']}
          defaultPageSize={pageSize}
          current={pageNum}
        />
      </Card>
    </div>
  )
}

export default Index
